<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		td{
			text-align: center;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var oTable = document.getElementById('table');
        var oButton = document.getElementById('button');
        var oName = document.getElementById('name');
        var oAge = document.getElementById('age');
        
        var n=oTable.tBodies[0].rows.length+1;

        oButton.onclick=function(){
           
           var oTr=document.createElement('tr');

           var oTd=document.createElement('td');
           oTd.innerHTML=n++;
           oTr.appendChild(oTd);

           var oTd=document.createElement('td');
           oTd.innerHTML=oName.value;
           oTr.appendChild(oTd);

           var oTd=document.createElement('td');
           oTd.innerHTML=oAge.value;
           oTr.appendChild(oTd);      

           var oTd=document.createElement('td');
           oTd.innerHTML='<a href="javascript:;">删除</a>';
           oTr.appendChild(oTd);  

           var aA=document.getElementsByTagName('a');
          
           //存在一个未解决的BUG。无法删除最后一条
           //存在一个未解决的BUG。必须要先添加一行，才能删除默认的行
           for (var i = 0; i < aA.length; i++) {
	           aA[i].onclick=function(){
                  console.log(i+"<"+aA.length);
	              oTable.tBodies[0].removeChild(this.parentNode.parentNode);
	           }
           }
    


         oTable.tBodies[0].appendChild(oTr);

        };



        //搜索
        var oSearch=document.getElementById('search');
        oSearch.onclick=function(){
	       for (var i = 0 ; i < oTable.tBodies[0].rows.length ; i++) {
	       	   
	       	    //toLowerCase 英文强制转小写
	       	    //搜索的时候用于忽略大小写
               



	        	var strTable=oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
	        	var strValue=oName.value.toLowerCase();
      	         
                //这里做一个简单的判断
      	        var oError = document.getElementById('error');
                if (strValue=="") {
                    oError.style.display='block';
                	oError.innerHTML='关键字不能为空';
                	//alert('');
                	return false;
                }else{
                	oError.style.display='none';
                	oError.innerHTML='';
                }


                //search 模糊搜索  找到并且返回字符串出现的位置
                //如果没有找到返回-1

                //split 多关键字搜索
                //切分字符串
              
                var aArrValue=strValue.split(' ');

                oTable.tBodies[0].rows[i].style.background='';

                console.log(aArrValue.length);
                for (var j = 0 ; j < aArrValue.length; j++) {
               
	                if (strTable.search(aArrValue[j])!=-1 ) {
		        		oTable.tBodies[0].rows[i].style.background='green';
		        		oTable.tBodies[0].rows[i].style.color='#fff';
		        	};

                };
	        	
	        };

        };



        //排序
        var oSort = document.getElementById('sort');
        
        oSort.onclick=function(){
           var arr=[];
           for (var i = 0 ; i < oTable.tBodies[0].rows.length ; i++) {
            	var aTD = oTable.tBodies[0].rows[i];
                arr[i]=aTD;
                //console.log(arr[i]);
                //console.log(aTD.innerHTML);
            }
            
            //对比TR当中的第三个TD中的数据
            arr.sort(function(tr1,tr2){
            	var n1=parseInt(tr1.cells[2].innerHTML);
            	var n2=parseInt(tr2.cells[2].innerHTML);
            	return n1-n2;
            });
            
          for (var i2 = 0 ; i2 < arr.length; i2++) {
                 //把数组中的TR从新appendChild一下插入TR
            	 oTable.tBodies[0].appendChild(arr[i2]);
            }  


        }
 
	};
	</script>
</head>
<body>
	姓名：<input type="text" id="name">
	年龄：<input type="text" id="age">
	<input type="button" id="button" value="添加">
	<input type="button" id="search" value="搜索">
	<input type="button" id="sort" value="排序">
	<p id='error' style="display:none"></p>
	<table id="table" border='1' width="500">
		<thead>
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>15</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>12</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>54</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>19</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>5</td>
				<td>孙七</td>
				<td>26</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>6</td>
				<td>周八</td>
				<td>29</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>7</td>
				<td>吴九</td>
				<td>25</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
		</tbody>
	</table>
</body>
</html>